<template>
    <div class="more">
        <van-nav-bar title="歌单分类" left-text="返回" left-arrow @click-left="back"/>
        <van-tabs :line-width="28">
            <van-tab v-for="(item,index) in hotList" :title="item.name" :key="index">
            </van-tab>
        </van-tabs>
        <ul>
            <li></li>
        </ul>
    </div>
</template>

<script>
import { NavBar } from 'vant'
import { getPlaylistHot, getSonglistDetail } from 'api/api'
import { Tab, Tabs } from 'vant'
export default {
    name: '',
    data() {
        return {
            hotList: []
        }
    },
    mounted() {
        this._getPlaylistHot()
    },
    methods: {
        _getPlaylistHot() {
            getPlaylistHot().then(res=> {
                this.hotList = res.tags
                this._getSonglistDetail(this.hotList[0].id)
            })
        },
        _getSonglistDetail(id) {
            getSonglistDetail({id}).then(res=> {
                console.log(res)
            })
        },
        back() {
            this.$router.back()
        }
    },
    components: {
        [Tab.name]: Tab,
        [Tabs.name]: Tabs,
        [NavBar.name]: NavBar
    }
}
</script>

<style lang="less" scoped>
    .more{
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: #fff;
    }
</style>